<template>
	<view>
		<view class="topcont">
			<view class="tit">{{ detail.title }}</view>
			<view class="val">{{ detail.createTime }}</view>
			<view class="image"
				v-if="typeof detail.pics === 'object' && detail.pics !== null && detail.pics.length > 0">
				<u-swiper :list="detail.pics" keyName="pic" radius="0" height="320" indicator
					:autoplay="false"></u-swiper>
			</view>
			<view class="info">
				<u-parse :content="detail.info"></u-parse>
			</view>
		</view>
		<view class="list"
			v-if="typeof detail.childList === 'object' && detail.childList !== null && detail.childList.length > 0">
			<view class="list-one" v-for="(item, list) in detail.childList" :key="list">
				<view class="bottm">
					<view class="l">{{ item.creatorStr }}</view>
					<view class="r">{{ item.createTime }}</view>
				</view>
				<view class="image" v-if="typeof item.pics === 'object' && item.pics !== null && item.pics.length > 0">
					<u-swiper :list="item.pics" keyName="pic" radius="0" height="320" indicator></u-swiper>
				</view>
				<view class="info" style="margin-top: 10rpx;">
					<u-parse :content="item.info"></u-parse>
				</view>
			</view>
		</view>
		<!-- <view style="height: 200rpx;"></view> -->
		<!-- <view class="btn" @click="show = true">回复或评论</view> -->
		<u-popup :show="show" @close="close" closeable>
			<view class="popup-cont">
				<view class="tit">照片或视频</view>
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" :previewFullImage="false" name="2" :maxCount="9"
					accept="file" uploadText="图片或视频" :sizeType="['compressed']"></u-upload>
				<view class="tit">详细回复或讨论</view>
				<view class="text">
					<u--textarea v-model="value1" placeholder="请输入内容" count></u--textarea>
				</view>
				<view class="btns" @click="click_idea">提交回复</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		zjzxget,
		zjzxcreate
	} from '@/api/consult.js';
	import {
		commonUpload
	} from '@/api/mine.js';
	export default {
		data() {
			return {
				detail: [],
				show: false,
				value1: '',
				fileList2: []
			};
		},
		onLoad(options) {
			this.get_zjzxget(options.id);
		},
		methods: {
			click_idea() {
				if (!this.value1) {
					uni.$u.toast('请填写内容');
					return;
				}
				let post = {
					parentId: this.detail.id,
					info: this.value1,
					pics: []
				};
				if (this.fileList2.length > 0) {
					for (var i = 0; i < this.fileList2.length; i++) {
						post.pics.push(this.fileList2[i].url);
					}
				}
				zjzxcreate(post).then((res) => {
					if (res.code == '0') {
						this.show = false;
						uni.$u.toast('回复成功，需等待审核')
						let that = this;
						setTimeout(() => {
							that.get_zjzxget(that.detail.id);
						}, 1000)
					}else{
						uni.$u.toast(res.msg);
					}
				});
			},
			get_zjzxget(id) {
				zjzxget({
					id: id
				}).then((res) => {
					this.detail = res.data;
					this.show = false;
				});
			},
			close() {
				this.show = false;
				this.fileList2 = [];
				this.value1 = '';
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = commonUpload({
						url: url
					}).then((res) => {
						if (res.code == '0') {
							setTimeout(() => {
								resolve(res.data);
							}, 50);
						} else {
							uni.$u.toast('上传失败');
						}
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		// background-color: #fff;
	}

	.topcont {
		background-color: #fff;

		.tit {
			padding: 24rpx;
			text-align: left;
			line-height: 80rpx;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
		}

		.val {
			padding: 24rpx;
			margin-top: -48rpx;
			text-indent: 1em;
			font-size: 24rpx;
			color: #626675;
			text-align: right;
		}

		.info {
			padding: 24rpx;
			font-size: 26rpx;
		}
	}

	.list {
		background-color: #fff;
		margin: 24rpx;
		padding: 24rpx;
		border-radius: 12rpx;

		.list-one {
			border-bottom: 2rpx solid #d8d8d8;
			padding-bottom: 24rpx;

			.bottm {
				height: 100rpx;
				line-height: 100rpx;

				.l {
					font-weight: bold;
				}

				.r {
					font-size: 26rpx;
					color: #848689;
				}
			}

			.info {
				padding: 0;
				font-size: 28rpx;
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 40rpx;
		/* #ifdef H5 */
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		/* #endif */
		left: 10%;
		width: 80%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #8BB950;
		border-radius: 40rpx;
		color: #fff;
	}

	.popup-cont {
		padding: 48rpx;

		.tit {
			text-align: left;
			font-size: 32rpx;
			line-height: 44rpx;
			font-weight: bold;
			margin-top: 32rpx;
			margin-bottom: 24rpx;
		}

		.text {
			margin: 0;
			border: 2rpx solid #d8d8d8;
			border-radius: 12rpx;
		}

		.btns {
			margin: 64rpx;
			height: 88rpx;
			background: #8BB950;
			border-radius: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>